import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native';

import Button from '../components/Button';
import navigationUtil from '../utils/navigation';
import { removeTokens, removeUserInfo } from '../utils/storage';
import { storage,} from '../utils/storage';

import Icon from 'react-native-vector-icons/Ionicons'

import NextItem from '../components/NextItem'

class Profile extends Component {

  constructor(props) {
    super(props)
    this.state = {
      userInfo: {},
    }
  }

  render() {
    let user = this.state.userInfo;
    //底部栏
    const names = [{ name: '推荐给好友', screen: 'Recommend', }, { name: '建议与反馈', screen: 'Suggection' }, { name: '设置', screen: 'Set' }, { name: '关于费控宝', screen: 'AboutFKB' }, { name: '多语言', screen: 'Language' },]

    return (
      <View style={styles.container}>

        <View style={styles.personalViewStyle}>
          <Image source={{ uri: user.avatarSmall }}
            style={styles.headImgStyle}
          />
          <View style={styles.infoStyle}>
            <Text>{user.nickname}</Text>
            <Text style={styles.mobileStyle}>{user.mobile}</Text>
          </View>
          <View style={{ flex: 1, alignItems: 'flex-end' }}>
            <Icon name='ios-arrow-forward' size={30} />
          </View>
        </View>
        <View style={styles.companyStyle}>
          <Text style={{lineHeight: 60,fontSize: 17, paddingLeft: 10 }}>我的企业</Text>
          <View style={{ flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' }}>
            <Text style={{ lineHeight: 60, marginRight: 15 }}>{user.orgName}</Text>
            <Icon style={{ marginRight: 10 }} name='ios-arrow-forward' size={30} />
          </View>
        </View>
        <View >{
            names.map(t=><NextItem  key={t.name} item={t} buttonPress={(t)=>this.buttonPress(t)} />)
          }
        </View>
        <Button
          onPress={this.logout}
        >
          退出登录
        </Button>
      </View>
    );
  }
  buttonPress = (item) => {

    this.props.navigation.navigate(item.screen,{title:item.name});
    
  }

  bottomChiledViews() {


  }

  componentDidMount() {

    storage.load({ key: 'accessUserData' }).then(result => {
      this.setState({
        userInfo: result
      })
    })

  }

  logout = () => {
    removeTokens();
    removeUserInfo();
    navigationUtil.reset(this.props.navigation, 'Login');
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // paddingHorizontal: 16,
    backgroundColor: '#e8e8e8'

  },
  personalViewStyle: {
    padding: 10,
    marginBottom: 1,
    borderBottomWidth: 0.5,
    borderBottomColor: 'gray',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'white'
  },
  headImgStyle: {
    height: 40,
    width: 40,
    marginRight: 20,
  },
  infoStyle: {
    justifyContent: 'space-between'
  },
  companyStyle: {
    height: 60,
    alignItems: 'center',
    flexDirection: 'row',
    marginBottom: 15,
    backgroundColor: 'white',

  },
  childViewStyle: {
    height: 44,
    marginBottom: 10,
    backgroundColor: 'white',

  }


});

export default Profile;
